<template>
    <div id="home">

        <h1>{{ msg }}</h1>
        <h2>home组件</h2>


        <ul>
            <li v-for="item in list">
                {{item}}
            </li>
        </ul>
    </div>
</template>



<script>
/**
 * 请求数据的模板

    axios  的使用

    1、安装  cnpm  install  axios --save


    2、哪里用哪里引入axios
 */
import Axios from "axios";
export default {
  name: "home",
  data() {
    return {
      msg: "home组件",
      list: []
    };
  },
  methods: {
    getData() {
      var api =
        "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";

      // axios.get(api).then(function(response) {
      //   console.log(response);
      // });

      Axios.get(api)
        .then(response => {
          console.log(response);
          this.list = response.data.result;
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  mounted() {
    console.log("组件渲染完毕");
    this.getData();
  }
};
</script>

<style lang="scss">
</style>